<template>
  <div style="margin-top: 60px;margin-left: 80px;border: 0px solid red">
    <el-form style="margin-left: -40px" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
             class="demo-form-inline">
      <el-form-item label="字段" prop="key">
        <el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择">
          <el-option label="楼宇名称" value="b_name"></el-option>
          <el-option label="楼宇信息" value="b_msg"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="值">
        <el-input v-model="ruleForm.value" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;position: relative;top: 10px">
      <el-table-column
          fixed
          label="ID"
          width="260"
          prop="bid">
      </el-table-column>
      <el-table-column
          label="楼宇名称"
          width="200"
          prop="bname">
      </el-table-column>
      <el-table-column
          label="楼宇信息"
          width="200"
          prop="bmsg">
      </el-table-column>
      <el-table-column
          label="宿管"
          width="200"
          prop="dname">
      </el-table-column>
      <el-table-column
          label="操作"
          align="right">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">Edit
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 30px;float: right"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="parseInt(total)"
        :current-page.sync="currentPage"
        @current-change="page"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BuildingManager",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: '',
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 5
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      },
      tableData: null,
      search: ''
    }
  },
  methods:{
    page(currentPage){
      const _this=this
      if (_this.ruleForm.value==''){
        axios.get('http://192.168.163.234:8081/building/list/'+currentPage+'/'+_this.pageSize).then(
            function (response){
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }else{
        _this.ruleForm.page=_this.currentPage
        axios.get('http://192.168.163.234:8081/building/search',{params:_this.ruleForm}).then(
            function (response) {
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }
    },
    handleEdit(index, row) {
      this.$router.push('/buildingUpData?id='+row.bid);
    },
    handleDelete(index, row) {
      const _this=this;
      this.$confirm('确认删除【'+row.bname+'】吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        axios.delete('http://192.168.163.234:8081/building/deleteById/'+row.bid).then(
            function (response) {
              if (response.data.code==0){
                _this.$alert('【'+row.dname+'】已删除','',{
                  confirmButtonText:'确定',
                  callback:action => {
                    location.reload();
                  }
                })
              }
            }
        )
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消删除'
        })
      })
    },
    onSubmit(formName) {

      //让翻页复原
      this.currentPage=1;
      this.$refs.ruleForm.validate((valid)=>{
        if (valid){
          const _this=this
          _this.ruleForm.page=_this.currentPage
          axios.get('http://192.168.163.234:8081/building/search',{params:_this.ruleForm}).then(
              function (response) {
                _this.tableData=response.data.data.data
                _this.total=response.data.data.total
              }
          )
        }
      })
    }
  },
  created() {
    const _this=this
    axios.get('http://192.168.163.234:8081/building/list/1/'+_this.pageSize).then(
        function (response) {
          _this.tableData=response.data.data.data
          _this.total=response.data.data.total
        }
    )
  }
}
</script>

<style scoped>

</style>
